<template>
  <div class="app-container">
    <v-row justify="center">
      <v-dialog
        v-model="visible"
        persistent
        transition="dialog-top-transition"
        max-width="600px">

        <v-card :rules="rules">
          <!-- 对话框标题 -->
          <v-card-title>
            <span style="font-size: 18px">添加角色</span>
          </v-card-title>

          <!-- 表单 -->
          <v-form ref="form" v-model="valid" style="max-height: 600px;overflow: auto;">
            <v-card-text>
              <v-container>
                <v-row>
                  <v-col cols="12" sm="6">
                    <v-text-field
                      label="*角色名称"
                      v-model="form.roleName"
                      :rules="rules.roleName"
                      placeholder="请输入角色名称"
                      required
                      clearable
                      dense
                    ></v-text-field>
                  </v-col>

                  <v-col cols="12" sm="6">
                    <v-text-field
                      label="*权限字符"
                      v-model="form.roleKey"
                      :rules="rules.roleKey"
                      placeholder="请输入权限字符"
                      required
                      clearable
                      dense
                    ></v-text-field>
                  </v-col>

                  <v-col cols="12" sm="6">
                    <v-text-field
                      label="*角色顺序"
                      v-model="form.roleSort"
                      :rules="rules.roleSort"
                      placeholder="请输入角色顺序"
                      required
                      clearable
                      dense
                      type="number"
                    ></v-text-field>
                  </v-col>

                  <v-col cols="12" sm="6">
                    <v-radio-group
                      label="*状态"
                      v-model="form.status"
                      :rules="rules.status"
                      row dense style="margin: 0;"
                    >
                      <v-radio
                        v-for="dict in statusOptions"
                        :key="dict.dictValue"
                        :label="dict.dictLabel"
                        :value="dict.dictValue"
                      ></v-radio>
                    </v-radio-group>
                  </v-col>

                  <v-col cols="12" sm="12" style="padding: 0;">
                    <div style="display: inline-block;">
                      <v-card-title style="margin: 0;padding-top: 0;padding-bottom: 0;width: 100px">
                        <span class="column-label">菜单权限</span>
                      </v-card-title>
                      <v-checkbox
                        v-model="openAll"
                        label="折叠"
                        color="indigo"
                        dense
                        @change="openAllOnChange"
                        title="(未实现展开全部)"
                        style="margin-top: -27px;margin-left: 120px;"
                      ></v-checkbox>
                      <v-checkbox
                        v-model="selectionTypeCheck"
                        label="父子联动"
                        color="indigo"
                        @change="selectionTypeOnChange"
                        dense style="margin-top: -47px;margin-left: 240px;"
                      ></v-checkbox>
                    </div>

                    <v-container fluid style="border: indigo 1px solid;border-radius: 3px;width: 95%;margin: 0 auto;">
                      <v-treeview
                        ref="tree"
                        :openAll="openAll"
                        dense
                        activatable
                        hoverable
                        selectable
                        :selection-type="selectionType"
                        :items="menuOptions"
                        item-key="id"
                        v-model="form.menuIds"
                        style="font-size: 14px;padding: 0;background-color: white;"
                      >
                         <!--插槽-->
                        <template v-slot:prepend="{ item, open }">
                          <div style="min-width: 180px;max-width: 240px;overflow: hidden">
                            {{ item.label }}
                          </div>
                        </template>
                      </v-treeview>
                    </v-container>
                  </v-col>

                  <v-col cols="12" sm="12" style="padding-bottom: 0;padding-top: 0;margin-top: 15px">
                    <v-textarea
                      v-model="form.remark"
                      label="备注"
                      placeholder="请输入内容"
                      auto-grow
                      filled
                      clearable
                      dense
                    >
                    </v-textarea>
                  </v-col>
                </v-row>
              </v-container>
              <small class="ml10">*表示必需字段</small>
            </v-card-text>
          </v-form>

          <!-- 底部操作按钮 -->
          <v-card-actions>
            <v-spacer></v-spacer>
            <v-btn
              text
              @click="updateVisible(false)">
              取消
            </v-btn>
            <v-btn
              color="blue darken-1"
              text
              @click="submitForm">
              保存
            </v-btn>
          </v-card-actions>
        </v-card>
      </v-dialog>
    </v-row>
  </div>
</template>

<!-- 添加角色对话框 -->
<script>
  import "@riophae/vue-treeselect/dist/vue-treeselect.css";
  import { addRole } from "@/api/system/role";

  export default {
    name: "RoleAddComp",
    props: {
      visible: Boolean, // 是否打开对话框
      menuOptions: Array, // 菜单角色
      statusOptions: Array, // 状态
    },
    emits: ['updateVisible'],
    data() {
      return {
        // 遮罩层
        loading: true,
        // 表单参数
        form: {},
        // 表单校验
        rules: {
          roleName: [
            //val => (val || '').length > 0 || '角色名称不能为空',
            v => !!v || '角色名称不能为空',
          ],
          roleKey: [
            v => !!v || '权限字符不能为空',
            //val => (val || '').length > 0 || '权限字符不能为空'
          ],
          roleSort: [
            val => (val || '').length > 0 || '角色顺序不能为空'
          ],
          status: [
            val => (val || '').length > 0 || '请选择状态'
          ]
        },
        valid: true, // 表单校验
        openAll: false, // 展开全部
        selectionTypeCheck: true, // 父子联动
        selectionType: 'leaf' // 父子联动
      };
    },
    methods: {
      validate () {
        this.$refs.form.validate()
      },
      /** 保存 */
      async submitForm() {
        await this.validate();
        this.form.deptCheckStrictly = true;
        this.form.menuCheckStrictly = true;
        if (this.valid) {
          addRole(this.form).then(res => {
            // 使用全局消息提示
            this.$store.dispatch('snackbar/openSnackbar',{
              msg: '新增成功',
              color: 'success'
            })
            this.$emit('done');
            this.updateVisible(false);
          });
        }
      },
      // 调用父级关闭对话框, 并重置表单
      updateVisible(value) {
        this.reset();
        this.$emit('updateVisible', value);
      },
      // 表单重置
      reset() {
        this.form = {
          roleId: undefined,
          roleName: undefined,
          roleKey: undefined,
          roleSort: null,
          status: "1",
          menuIds: [],
          deptIds: [],
          menuCheckStrictly: true,
          deptCheckStrictly: true,
          remark: undefined
        };
        if (this.$refs.form) {
          this.$refs.form.resetValidation();
        }
      },
      openAllOnChange(val) {
        this.openAll = val
        this.$refs.tree.updateAll();
      },
      selectionTypeOnChange(val) {
        if (val) {
          this.selectionType = 'leaf';
        } else {
          this.selectionType = 'independent'
        }
      },

    }
  };
</script>
